<script setup>
import { ref } from 'vue';
let arr=[
  {
    id:1,
    title:'aaa',
    authoe:'bbb',
    content:'1111'
  },
  {
    id:2,
    title:'aaa',
    authoe:'bbb',
    content:'1111'
  },
  {
    id:3,
    title:'aaa',
    authoe:'bbb',
    content:'1111'
  },
  {
    id:4,
    title:'aaa',
    authoe:'bbb',
    content:'1111'
  }
]

let blog = ref({
  id:0,
  title:'',
  author:'',
  content:''
})

let blogs = ref(arr)

//隐藏添加栏
let isSeen = ref(false)

function btnSave(){
  console.log('保存');
  isSeen.value = false

  console.log(blog.value);

  let ids = blogs.value.map(item => item.id);

  console.log(ids);

  let maxId = Math.max(...ids)

  blog.value.id =  maxId + 1

  blogs.value.push(blog.value)

  console.log(blogs.value);
  
  
}

function btnCancel(){
  console.log('取消');
  isSeen.value = false
}

function btnAdd(){
  console.log('新增'); 
  isSeen.value = true

  blog.value.id = 0 
  blog.value.title = ''
  blog.value.author = ''
  blog.value.content = ''


}

function btnEdit(id){
  console.log(id);
}

//删除
function btnDel(id){
  console.log(id);

  let idx = blogs.value.findIndex(item =>item.id === id);
  console.log('下标',idx);
  
  blogs.value.splice(idx,1)

}

function btnFind(){
  console.log('查看');
}
</script>

<template>
  <div class="content">
    <div v-show="isSeen" class="addOrEdit other">
      <form>
        <table>
          <tbody>
            <tr>
              <td><label for="">标题：</label></td>
              <td><input type="text" v-model="blog.title"></td>
            </tr>

            <tr>
              <td><label for="">作者：</label></td>
              <td><input type="text" v-model="blog.authoe"></td>
            </tr>

            <tr>
              <td><label for="">内容：</label></td>
              <td><input type="text" v-model="blog.content"></td>
            </tr>

            <tr>
              <td><input type="button" value="确定保存" @click="btnSave"></td>
              <td><input type="button" value="取消保存" @click="btnCancel"></td>
            </tr>
          </tbody>
        </table>
      </form>
    </div>
    <div class="operation other">
        <input type="text" placeholder="请输入关键字">
        <input type="button" value="查找" @click="btnFind">
        <input type="button" value="新增" @click="btnAdd">
    </div>
    <div class="list other">
      <table>
        <thead>
          <tr>
            <th>序号</th>
            <th>标题</th>
            <th>作者</th>
            <th>内容</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="blog in blogs" :key="blog.id">
            <td>{{ blog.id }}</td>
            <td>{{ blog.title }}</td>
            <td>{{ blog.authoe }}</td>
            <td>{{ blog.content }}</td>
            <td>
              <input type="button" value="编辑" @click="btnEdit(blog.id)">
              <input type="button" value="删除" @click="btnDel(blog.id)">
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<style>
.content{
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.other{
  border: 1px solid;
   margin: 10px;
}
</style>

